<template>
  <view class="flex-row flex-center" :class="hasMore ? 'margin-top-50 margin-bottom-30' : 'margin-top-20'">
    <template v-if="hasMore">
      <text class="technician-jiazaizhong color-t2"></text>
      <text class="text-24 color-t2 margin-left-10">{{text}}</text>
    </template>
    <view v-else class="no-more relative">
      <text class="text-24 color-t2">{{ noDataText || '暂无更多数据' }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
interface IProps{
  text: string
  hasMore: boolean
  noDataText?: string
}

defineProps<IProps>()
</script>

<style scoped lang="scss">
.technician-jiazaizhong{
  display: block;
  animation: rotate 2s linear infinite;

  @keyframes rotate {
    0%{
      transform: rotate(0);
    }
    100%{
      transform: rotate(360deg);
    }
  }

}

.no-more{
  &:before{
    content:'';
    width: 60rpx;
    height: 2rpx;
    background: #8F8F8F;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -80rpx;
  }
  &:after{
    content:'';
    width: 60rpx;
    height: 2rpx;
    background: #8F8F8F;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -80rpx;
  }
}
</style>
